<template>
  <div>
    <div
        style="
        border-bottom: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 30px;
        position: relative;
      "
    >
      <van-icon
          @click="goBack"
          name="arrow-left"
          style="position: absolute; left: 10px; top: 20px"
      />
<!--    `van-icon`组件来创建一个返回按钮。-->

<!--      - `@click="goBack"`：当用户点击该按钮时，会触发名为`goBack`的方法。-->
<!--      - `name="arrow-left"`：指定该按钮的图标为向左的箭头。-->
<!--      - `style="position: absolute; left: 10px; top: 20px"`：-->
<!--      设置该按钮的位置和样式，使其在页面上显示为一个绝对定位的图标，距离左边10像素，距离顶部20像素。-->

      <span style="position: absolute; left: 50%; top: 20px">
        {{ currentCategory.obj.name }}</span
      >
<!--      这段代码是使用Vue.js框架中的模板语法来显示一个文本内容。-->

<!--      - `<span>`：表示一个HTML的`<span>`元素，用于包裹文本内容。-->
<!-- - `style="position: absolute; left: 50%; top: 20px"`：设置该元素的样式，-->
<!--      使其在页面上显示为一个绝对定位的元素，距离左边50%（即居中），距离顶部20像素。-->
<!-- - `{{ currentCategory.obj.name }}`：使用双花括号语法来插入一个变量的值，-->
<!--      这里插入的是`currentCategory.obj.name`的值，即当前分类的名称。-->

    </div>



    <div v-if="categoryProducts.obj && categoryProducts.obj.length > 0">
<!--      这段代码是使用Vue.js框架中的条件渲染指令v-if来控制一个<div>元素的显示和隐藏。-->

<!--      v-if="categoryProducts.obj && categoryProducts.obj.length > 0"：
当categoryProducts.obj存在且其长度大于0时，该<div>元素才会被渲染出来。否则，该元素不会被渲染。-->
<!--        <div>：表示一个HTML的<div>元素，用于包裹其他内容。-->
      <div
          style="
          flex-wrap: wrap;
          padding: 20px;
          display: flex;
          justify-content: space-between;
        "
      >
        <div
            v-for="(i, index) in categoryProducts.obj"
            :key="index"
            style="
            border: 1px solid #f3f3f3;
            width: calc((100vw - 150px) / 2);
            margin-right: 10px;
            margin-bottom: 10px;
            border-radius: 15px;
            text-align: center;
            padding: 20px;
          "
        >
<!--          这段代码是使用Vue.js框架中的循环指令`v-for`来渲染一个列表。-->

<!--          - `v-for="(i, index) in categoryProducts.obj"`：表示对`categoryProducts.obj`数组进行遍历，
每次遍历都会将当前元素赋值给变量`i`，同时将当前元素的索引赋值给变量`index`。-->
<!--          - `:key="index"`：为每个循环项指定一个唯一的`key`值，用于优化渲染性能。-->
<!--          - `style="..."`：设置该`<div>`元素的样式，包括边框、宽度、外边距、内边距等。-->

          <div>
            <img
                :src="i.img"
                style="border-radius: 15px; width: 100%; height: 100%"
            />

          </div>

          <div style="margin-bottom: 30px">


            <span>{{ i.name }}</span>
<!--            这段代码是使用Vue.js框架中的模板语法来显示一个文本内容。-->
<!--            `{{ i.name }}`即当前循环项的名称。-->
          </div>

          <div style="display: flex; justify-content: space-between">

            <span>{{ i.unit }}{{ i.price }}</span>
<!--            {{ i.unit }}：即当前项目或产品的单位-->

<!--            {{ i.price }}：即当前项目或产品的价格。-->


            <span
                style="
                padding: 5px 14px;
                border-radius: 10px;
                background: #53b175;
                color: #fff;
                font-size: 16px;
              "
            >+</span>
          </div>


        </div>
      </div>
    </div>
    <van-empty description="还没有产品哦" v-else />

<!--    如果产品列表为空（即不满足v-if的条件），则在页面上显示一个Vant的空状态组件，其中包含描述信息“还没有产品哦”。-->
<!--    这提供了更好的用户体验，让用户知道当前没有可显示的产品。-->
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "../mixin.js";



// - `import { ref, reactive, onMounted } from "vue"`：从Vue.js中导入`ref`、`reactive`和`onMounted`三个函数。`ref`用于创建响应式引用对象，`reactive`用于创建响应式对象，`onMounted`用于在组件挂载后执行某些操作。
// - `import { useRouter } from "vue-router"`：从Vue Router中导入`useRouter`函数，用于获取当前路由实例。
// - `import { showDialog } from "vant"`：从Vant UI库中导入`showDialog`函数，用于显示对话框。
// - `import { userStore } from "../store/piniaStore"`：从Pinia Store中导入`userStore`，这是一个自定义的状态管理库。
// - `import { myMixin } from "../mixin.js"`：从`mixin.js`
// 文件中导入`myMixin`，这是一个自定义的混入对象，用于将一些公共属性和方法混入到组件中。


const { errorMsgBox, successMsgBox } = myMixin();
const useUserStore = userStore();
const router = useRouter();
// - `const { errorMsgBox, successMsgBox } = myMixin();`：从`myMixin()`函数中解构出两个方法`errorMsgBox`和`successMsgBox`，
// 这两个方法可能是用于显示错误信息和成功信息的弹窗。
// - `const useUserStore = userStore();`：调用`userStore()`函数并将返回值赋给常量`useUserStore`，
// 这个函数可能是用于创建一个用户状态管理的store。
// - `const router = useRouter();`：调用`useRouter()`函数并将返回值赋给常量`router`，
// 这个函数可能是用于获取路由实例，以便在组件中使用路由相关的功能。


let categorys = useUserStore.categorys;
let products = useUserStore.products;
let categoryProducts = reactive({ obj: [] });
let currentCategory = reactive({ obj: {} });


// - `let categorys = useUserStore.categorys;`：从`useUserStore`中获取`categorys`属性
// ，并将其赋值给变量`categorys`。
// - `let products = useUserStore.products;`：从`useUserStore`中获取`products`属性，
// 并将其赋值给变量`products`。
// - `let categoryProducts = reactive({ obj: [] });`：创建一个响应式对象`categoryProducts`，
// 其中包含一个名为`obj`的属性，其初始值为空数组。
// - `let currentCategory = reactive({ obj: {} });`：创建一个响应式对象`currentCategory`，
// 其中包含一个名为`obj`的属性，其初始值为空对象。


onMounted(() => {
  currentCategory.obj = JSON.parse(
      window.localStorage.getItem("currentCategory")
  );
//   这段代码是Vue.js框架中的一个生命周期钩子函数onMounted，用于在组件挂载后执行一些操作。
//
// 具体来说，当组件被挂载到DOM上时，会执行onMounted中的回调函数。在这个例子中，回调函数的作用是从浏览器的本地存储（localStorage）中获取名为"currentCategory"的数据，并将其解析为JSON对象，
//   然后将解析后的对象赋值给currentCategory.obj变量。这样做的目的可能是为了在组件加载时恢复之前保存的状态或数据。

  //获取类目下的所有产品
  products.forEach((element) => {
    if (element.category_id == currentCategory.obj.id) {
      categoryProducts.obj.push(element);
    }
  });
});

// 这段代码是JavaScript中的一个forEach循环，用于遍历一个数组（`products`），并对每个元素执行一些操作。
//
// 具体来说，在每次循环中，会检查当前元素的`category_id`属性是否等于`currentCategory.obj.id`的值。如果相等，则将该元素添加到`categoryProducts.obj`数组中。
// 这样做的目的可能是为了筛选出属于当前分类的所有产品，并将它们存储在一个单独的数组中。
function goBack() {
  router.push("search");
}

// 这段代码是一个名为`goBack`的函数，它的作用是将页面导航到"search"路由。当调用这个函数时，
// 它会使用`router.push()`方法将用户导航到"search"路由对应的页面。这通常用于在单页应用程序
// （SPA）中实现页面之间的跳转。
</script>
